<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import { findDetListApi } from "@/api/system/dict"
import { type FormInstance } from "element-plus"
import { Search, Refresh, Download, RefreshRight } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import type { VxeTablePropTypes, VxeTableEvents } from "vxe-table"

defineOptions({
  name: "dictDet"
})

// 接收父组件传递的 rowData 参数
const props = defineProps({
  dictRowData: {
    type: Object,
    required: true
  }
})

console.log("父组件传递的参数: ", props.dictRowData.dataDictCode)

const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const pageData = ref({
  dialogErrorMessageVisible: false,
  dialogDetPage: false,
  currentShowErrorMessage: "",
  testList: [
    { id: 1, name: "test", sex: "Women", age: 20, address: "北京市" },
    { id: 2, name: "test2", sex: "Man", age: 30, address: "上海市" }
  ]
})

//#region 查
const tableData = ref<any>([])
const tableDetData = ref<any>([])
const searchFormRef = ref<FormInstance | null>(null)

const getTableData = () => {
  loading.value = true
  findDetListApi({
    startPage: paginationData.startPage,
    pageSize: paginationData.pageSize,
    dataDictCode: props.dictRowData.dataDictCode
  })
    .then((res) => {
      paginationData.total = res.count
      tableData.value = res.data
      console.log(tableData.value)
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
const handleSearch = () => {
  paginationData.startPage === 1 ? getTableData() : (paginationData.startPage = 1)
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  handleSearch()
}

const rowDbclick = (row: any) => {
  console.log(row)

  pageData.value.dialogDetPage = true

  // loading.value = true
}

//#endregion

interface RowVO {
  id: number
  name: string
  role: string
  sex: string
  age: number
  address: string
}

const rowConfig = reactive<VxeTablePropTypes.RowConfig<RowVO>>({
  useKey: true,
  drag: true
})

interface ListClassOption {
  value: string | number
  label: string
  style?: string
}

const listClassOptions: ListClassOption[] = [
  { value: "primary", label: "默认(primary)" },
  { value: "success", label: "成功(success)" },
  { value: "info", label: "信息(info)" },
  { value: "warning", label: "警告(warning)" },
  { value: "danger", label: "危险(danger)" }
]

const findEnumLabel = (value: string): string => {
  // 遍历 enumData，找到匹配项就返回对应的 label
  const enumItem = listClassOptions.find((item) => String(item.value) === String(value))
  return enumItem ? enumItem.label : "未知类型"
}

const formatSexLabel = (sexList: string[]) => {
  if (sexList) {
    return sexList
      .map((name) => {
        const item = listClassOptions.find((item) => item.value === name)
        return item ? item.label : name
      })
      .join(",")
  }
  return ""
}

/** 监听分页参数的变化 */
watch([() => paginationData.startPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper">
        <div>
          <el-tooltip content="下载">
            <el-button type="primary" :icon="Download" circle />
          </el-tooltip>
          <el-tooltip content="刷新当前页">
            <el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
          </el-tooltip>
        </div>
      </div>
      <div class="table-wrapper">
        <vxe-table
          border
          ref="tableRef"
          :row-config="rowConfig"
          :data="tableData"
          :edit-config="{ mode: 'row', trigger: 'click' }"
        >
          <vxe-column title="" drag-sort width="60" />
          <vxe-column type="seq" title="序号" width="100" />
          <vxe-column field="name" title="名称" />
          <vxe-column field="value" title="键值" />
          <vxe-column field="remark" title="备注" />
          <!-- <vxe-column field="listClass" title="回显样式" width="200" :edit-render="{}" align="left">
            <template #edit="{ row }">
              <vxe-select v-model="row.listClass" :options="listClassOptions"> </vxe-select>
            </template>
          </vxe-column> -->

          <vxe-column field="listClass" title="回显样式" width="200" :edit-render="{}" align="left">
            <template #edit="{ row }">
              <vxe-select v-model="row.listClass" :options="listClassOptions">
                <template #option="{ option }">
                  <span>
                    <el-tag :type="option.value || ''"
                      ><span>{{ option.label }}</span></el-tag
                    >
                  </span>
                </template>
              </vxe-select>
            </template>

            <!-- 自定义显示列 -->
            <template #default="{ row }">
              <!-- 在这里添加logo或其他自定义样式 -->
              <span>
                <el-tag :type="row.listClass"
                  ><span> {{ findEnumLabel(row.listClass) }}</span></el-tag
                >
              </span>
            </template>
          </vxe-column>
          <vxe-column field="createTime" title="创建时间" />
          <vxe-column field="modifiedTime" title="修改时间" />
        </vxe-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.startPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-dialog v-model="pageData.dialogErrorMessageVisible" title="异常信息" width="70%">
      <div class="error-log">{{ pageData.currentShowErrorMessage }}</div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
